<template>
  <div>
    <div class="editBox">
      <div class="writeBox">
        <textarea
          name="write"
          class="write"
          spellcheck="false"
          v-model="blogContent"
          placeholder="writing something !"
        ></textarea>
      </div>
      <div class="previewBox">
        <div class="previewBoxContent" ref="preview"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  attributesModule,
  h,
  toVNode,
} from "snabbdom"
const patch = init([
  // 通过传入模块初始化 patch 函数
  classModule, // 开启 classes 功能
  attributesModule, //开启attributes功能
  propsModule, // 支持传入 props
  styleModule, // 支持内联样式同时支持动画
  eventListenersModule, // 添加事件监听
])
export default {
  data() {
    return {
      blogContent: "",
      preview: null,
      oldVnode: null,
      newVnode: null,
    }
  },
  watch: {
    blogContent(newVal) {
      const el = document.createElement("div")
      el.className = "previewBoxContent"
      el.innerHTML = newVal
      const newVnode = toVNode(el)
      patch(this.oldVnode, newVnode)
      this.oldVnode = newVnode
    },
  },
  methods: {
    patchVDom() {
      patch(
        this.vnode,
        h("h2.blue", null, [
          h(
            "span.red",
            {
              style: {
                color: "blue",
              },
            },
            "更新的虚拟dom",
          ),
        ]),
      )
    },
    initPreviewBox() {
      const previewBoxContent = document.querySelector(".previewBoxContent")
      this.oldVnode = toVNode(previewBoxContent)
      patch(previewBoxContent, this.oldVnode)
    },
  },
  mounted() {
    this.initPreviewBox()
    // const container = document.getElementById("container")
    // this.vnode = h(
    //   "h1.red",
    //   {
    //     style: {
    //       color: "red",
    //     },
    //   },
    //   [h("span.blue", null, "我是span标签")],
    // )
    // // // 传入一个空的元素节点 - 将产生副作用（修改该节点）
    // patch(container, this.vnode)
    // // // 再次调用 `patch`
    // // patch(vnode, newVnode) // 将旧节点更新为新节点
  },
}
</script>

<style scoped>
.editBox {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}
.writeBox {
  flex: 1;
  height: 100vh;
  max-width: 100%;
}
.write {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  border-bottom-left-radius: 10px;
  border: none;
  font-size: 16px;
  padding: 10px;
  box-sizing: border-box;
  resize: none;
  outline: none;
  border: 2px solid #333;
  background: #fff;
  color: #333;
  border-top: none;
  overflow-x: hidden;
  word-break: break-all;
  transition: all 0.3s linear;
}
.previewBox {
  transition: all 0.3s linear;
  flex: 1;
  height: 100%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  /* padding: 10px; */
  word-break: break-all;
  border: 2px solid #333;
  background: #fff;
  color: #333;
  border-left: none;
}
.img {
  width: 200px;
  height: 300px;
}
.red {
  color: red;
}
</style>
